<template>
  <div>
    <div class="middle-box">
      <span class="title"> 其他地址信息 </span>
    </div>
    <div class="btn_asset">
      <span class="btn_left">
        <el-button type="primary" @click="NewData"> 新增 </el-button>
        <el-button @click="batchDelete"> 删除 </el-button>
      </span>
      <span class="btn_right">
        <el-button size="small">
          <el-icon style="margin-right: 2px; margin-bottom: 2px"
            ><RefreshRight /></el-icon
          >刷新
        </el-button>
      </span>
    </div>
    <el-table
      stripe
      border
      height="100%"
      size="small"
      ref="table"
      :data="state.tableData"
      :cell-class-name="tableCellClassName"
      v-loading="state.loading"
      @cell-click="cellClick"
      @selection-change="handleSelectionChange"
    >
      <el-table-column align="center" type="selection" width="50" />
      <el-table-column align="center" label="地址类型">
        <template #default="scope">
          <div
            v-if="
              scope.row.index === state.rowIndex &&
              scope.column.index === state.columnIndex
            "
          >
            <el-select
              v-model="scope.row.addressType"
              placeholder="请输入"
              size="small"
              filterable
              clearable
              :option="state.option"
              fit-input-width
            >
              <el-option
                v-for="item in state.option"
                :key="item.value"
                :label="item.label"
                :value="item.label"
              />
            </el-select>
          </div>
          <span v-else>
            {{ scope.row.addressType }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="详细地址">
        <template #default="scope">
          <div
            v-if="
              scope.row.index === state.rowIndex &&
              scope.column.index === state.columnIndex
            "
          >
            <el-input v-model="scope.row.addressDetail" size="small" clearable>
            </el-input>
          </div>
          <span v-else>
            {{ scope.row.addressDetail }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="部门">
        <template #default="scope">
          <div
            v-if="
              scope.row.index === state.rowIndex &&
              scope.column.index === state.columnIndex
            "
          >
            <el-input v-model="scope.row.department" size="small" clearable>
            </el-input>
          </div>
          <span v-else>
            {{ scope.row.department }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="联系人">
        <template #default="scope">
          <div
            v-if="
              scope.row.index === state.rowIndex &&
              scope.column.index === state.columnIndex
            "
          >
            <el-input v-model="scope.row.contactor" size="small" clearable>
            </el-input>
          </div>
          <span v-else>
            {{ scope.row.contactor }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="电话">
        <template #default="scope">
          <div
            v-if="
              scope.row.index === state.rowIndex &&
              scope.column.index === state.columnIndex
            "
          >
            <el-input v-model="scope.row.telePhone" size="small" clearable>
            </el-input>
          </div>
          <span v-else>
            {{ scope.row.telePhone }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="手机">
        <template #default="scope">
          <div
            v-if="
              scope.row.index === state.rowIndex &&
              scope.column.index === state.columnIndex
            "
          >
            <el-input
              v-model="scope.row.mobilePhone"
              size="small"
              clearable
            ></el-input>
          </div>
          <span v-else>
            {{ scope.row.mobilePhone }}
          </span>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增对方信息 -->
    <el-dialog
      title="其他地址信息"
      v-model="state.dialogData.show"
      width="448px"
    >
      <el-form
        :model="state.formData"
        :rules="state.formRules"
        label-suffix=":"
        label-width="80px"
        ref="form"
      >
        <el-row :gutter="24">
          <el-col>
            <el-form-item label="地址类型" prop="addressType">
              <el-select v-model="state.formData.addressType" clearable filterable placeholder="请选择">
                <el-option
                  v-for="item in state.addressTypes"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col>
            <el-form-item label="详细地址" prop="addressDetail">
              <el-input
                v-model="state.formData.addressDetail"
                fit-input-width
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col>
            <el-form-item label="部门" prop="department">
              <el-input
                v-model="state.formData.department"
                fit-input-width
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col>
            <el-form-item label="联系人" prop="contactor">
              <el-input
                v-model="state.formData.contactor"
                fit-input-width
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col>
            <el-form-item label="电话" prop="telePhone">
              <el-input
                v-model="state.formData.telePhone"
                fit-input-width
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col>
            <el-form-item label="手机" prop="mobilePhone">
              <el-input
                v-model="state.formData.mobilePhone"
                fit-input-width
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel" type="default" size="small"
            >取消</el-button
          >
          <el-button
            type="primary"
            size="small"
            style="background: #5d9df5"
            @click="save"
            >保存</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted, toRaw, watch, defineProps, defineEmits, defineExpose } from "vue";
import request from "@/public/request";
import { ElMessage, ElMessageBox } from "element-plus";
import { useTableOption } from "@/components/AppPageTable2";
import { useRoute } from "vue-router";
const route = useRoute();
const NewData = () => {
  closeDiag();
  state.dialogData.show = true;
};
const form = ref();
const table = ref();
const props = defineProps({
  isNew: {
    type: Boolean,
  }
})
const emit = defineEmits()
const cancel = () => {
  state.dialogData.show = false;
  form.value.clearValidate();
}
const tableCellClassName = ({ row, column, rowIndex, columnIndex }) => {
  column.index = columnIndex;
  row.index = rowIndex;
};
const cellClick = (row, column, cell, event) => {
  state.rowIndex = row.index;
  state.columnIndex = column.index;
};
const batchDelete = () => {
  // 批量删除
  let deleteSelectArray = [];
  if (state.tableSelect.length > 0) {
    deleteSelectArray = state.tableSelect.map((item) => {
      return item.id;
    });

    ElMessageBox.confirm("确定删除所选其他地址信息吗", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        for (let i = 0; i < deleteSelectArray.length; i++) {
          state.tableData = state.tableData.filter(
            (item) => item.id != deleteSelectArray[i]
          );
        }
      })
      .catch(() => {
        ElMessage.info("取消删除");
      });
  } else {
    ElMessage.warning("请先选择");
  }
};
const handleSelectionChange = (val) => {
  let arr = [];
  for (let item of val) {
    let ret = toRaw(item);
    if (ret !== undefined) {
      arr.push(ret);
    }
  }
  state.tableSelect = arr;
};
const save = async () => {
  await form.value.validate();
  state.tableData.push({
    id: state.tableData.length + 1,
    createBy: "",
    createTime: "2024-05-19T04:31:59.487Z",
    updateBy: "string",
    updateTime: "2024-05-19T04:31:59.487Z",
    isDeleted: true,
    contactComId: route.query.id,
    addressType: state.formData.addressType,
    addressDetail: state.formData.addressDetail,
    shortName: "",
    telePhone: state.formData.telePhone,
    mobilePhone: state.formData.mobilePhone,
    contactor: state.formData.contactor,
    department: state.formData.department,
  });
  state.dialogData.show = false;
  ElMessage.success("添加成功");
};
const closeDiag = () => {
  //清除框
  state.formData.addressType = "";
  state.formData.addressDetail = "";
  state.formData.telePhone = "";
  state.formData.mobilePhone = "";
  state.formData.contactor = "";
  state.formData.department = "";
};
const state = reactive({
  rowIndex: -1, //行索引
  columnIndex: -1, //列索引
  query: {
    KeyWords: "",
  },
  tableSelect: [],
  option: useTableOption(), //分页
  formData: {
    id: 0,
    createBy: "",
    createTime: "2024-05-19T04:31:59.487Z",
    updateBy: "string",
    updateTime: "2024-05-19T04:31:59.487Z",
    isDeleted: true,
    contactComId: route.query.id,
    addressType: "",
    addressDetail: "",
    shortName: "",
    telePhone: "",
    mobilePhone: "",
    contactor: "",
    department: "",
  },
  isUpdatess: false,
  formRules: {
    name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
    phone: [{ required: true, message: "请输入电话", trigger: "blur" }],
  },
  tableData: [],
  compareTableData: [],
  loading: false,
  option: [
    {
      value: "王艳娇",
      label: "王艳娇",
    },
    {
      value: "大",
      label: "大",
    },
  ],
  addressTypes: [
    {
      value: "区地址",
      label: "区地址",
    },
    {
      value: "县地址",
      label: "县地址",
    },
  ],
  dialogData: {
    title: "",
    show: false,
  },
});

const getList = () => {
  state.option.loading = true;
  request
    .get("/api/craddress/queryby", {
      Id: route.query.id,
    })
    .then((res) => {
      state.tableData = res.data;
      state.compareTableData = JSON.parse(JSON.stringify(res.data))
    })
    .finally(() => {
      state.option.loading = false;
    });
}

const resetTableData = () => {
  state.tableData = JSON.parse(JSON.stringify(state.compareTableData))
}

watch(
  () => state.tableData,
  (newVal, oldVal) => {
    if (state.isUpdatess) {
      emit("otherAddressInfo", newVal);
      emit("acceptData", newVal);
    }
    state.isUpdatess = true
  },
  { deep: true }
);

defineExpose({
  resetTableData,//把子组件的方法暴露一个出口
  getList
})

onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped>
.middle-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .title {
    border-left: 2px solid #5d9df5;
    padding-left: 4px;
    font-size: 16px;
    font-weight: 600;
  }
}
.btn_asset {
  margin: 8px 0;
  display: flex;
  justify-content: space-between;
}
::v-deep .el-dialog {
  padding: 0 !important;
}
::v-deep .el-dialog__title {
  margin: 8px 0px 0px 16px;
  font-weight: 600;
}
::v-deep .el-dialog__header {
  display: flex;
  align-items: center;
  height: 36px;
  border-bottom: 1px solid #dee1e6;
}
::v-deep .el-col-24 {
  padding: 0 24px !important;
}
::v-deep .el-dialog__footer {
  height: 40px;
  display: flex;
  justify-content: center;
  border-top: 1px solid #dee1e6;
}
::v-deep .dialog-footer {
  height: 24px;
}
::v-deep .el-dialog__body {
  padding-bottom: 0;
}
</style>
